<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-12 15:09:42
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 选择单位页 -->
<script lang="ts" setup>
import type { FireInspectionPerson } from '@/genapi/fireProduct';
import { fireProductFireApiInspectionPersonJobQuerybyPost } from '@/genapi/fireProduct';
import { useUserStore } from '@/stores/user';
import { showNotify } from '@nutui/nutui';

defineOptions({ name: 'Login' });
const userStore = useUserStore();

const form = ref<FireInspectionPerson>({});

const { execute, isLoading } = useAsyncState(
	async () => {
		await userStore.login(form.value);
	},
	undefined,
	{
		immediate: false,
	},
);
const router = useRouter();
const pwdStorage = ref(false);

const register = () => {
	if (unitName.value) {
		router.replace({ path: '/login/registerTable' });
	} else {
		showNotify.text('请选择单位');
	}
};

// watchEffect(() => {
//   debugger;
//   userStore.isLogined && router.replace({ path: '/home' });
// });

const unitName = ref('');
const unitColumns = ref([
	{ text: '南京', value: 'Nanjing' },
	{ text: '无锡', value: 'Wuxi' },
	{ text: '海北', value: 'Haibei' },
	{ text: '北京', value: 'Beijing' },
	{ text: '连云港', value: 'Lianyungang' },
	{ text: '长沙', value: 'Changsha' },
	{ text: '武汉', value: 'Wuhan' },
]);
const showPopup = ref(false);

const createUnit = () => {
	router.replace({ path: '/login/createUnit' });
};

const confirm = ({ selectedValue, selectedOptions }) => {
	unitName.value = selectedValue[0];
	showPopup.value = false;
};

const backToLogin = () => {
	router.replace({ path: '/login' });
};
</script>

<template>
	<div class="register-page">
		<IconFont @click="backToLogin" class="back-to-login" name="rect-left" color="#fff"></IconFont>
		<div flex="1 ~ col justify-center" text="24px #EDF8FF" pl="34px" lh="32px" style="height: 200px">
			<div pb="16px">注册</div>
			<div text="14px">欢迎使用武汉化工园区移动端</div>
		</div>

		<nut-form label-position="top" p="y-30px" bg="#fff" rd="t-36px">
			<nut-form-item>
				<div class="selector-box" @click="showPopup = true">
					{{ unitName }}<span v-if="!unitName">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup" position="bottom">
					<nut-picker
						@confirm="confirm"
						:columns="unitColumns"
						title="请选择单位"
						@cancel="showPopup = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item>
				<nut-button block class="register-button" :loading="isLoading" @click="register"> 注册账号 </nut-button>
			</nut-form-item>
			<nut-form-item>
				<div class="register-unit-button" @click="createUnit">新建单位</div>
			</nut-form-item>
		</nut-form>
	</div>
</template>

<style scoped lang="scss">
.register-page {
	display: flex;
	flex-direction: column;
	width: 100vw;
	padding-top: 10vh;
	background-image: url('./assets/login-bg.png');
	background-size: 100% 37%;
	background-repeat: no-repeat;

	--nut-cell-color: #000;
	--nut-cell-box-shadow: 0;
	--nut-cell-padding: 10px 40px;
	--nut-cell-after-border-bottom: 0px;
	--nut-form-item-label-font-size: 14px;
	--nut-input-border-bottom: #588bff 1px;
	--nut-checkbox-label-color: #606266;
	--nut-checkbox-label-font-size: 12px;
	--nut-primary-color: #165dff;
	.back-to-login {
		position: absolute;
		top: 20px;
		left: 15px;
	}
	.nut-form {
		margin-top: 4vh;
		.selector-box {
			color: #000;
			font-size: 14px;
			span {
				color: #929292;
			}
			.nut-icon-rect-right {
				position: fixed;
				right: 10px;
			}
		}
	}
}

.nut-form-item .nut-input {
	padding: 8px 0;
}

.register-button {
	height: 35px;
	margin-top: 360px;
	font-size: 14px;
	color: #fff;
	background: #165dff;
	border: 1px solid #034196;
	border-radius: 16px;
}
.visitor-login {
	background: #fff;
	color: #165dff;
}
.register-unit-button {
	text-align: center;
	color: #606266;
	font-size: 12px;
	text-decoration-line: underline;
}
</style>

<style lang="scss">
.nut-notify {
	text-align: center;
	background: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%);
	color: #fff;
	height: 40px;
	line-height: 40px;
}
</style>
